<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>学号<input id="stuid" type="text" placeholder="输入学号：01" /></p>
        <p>
          姓名<input id="username" type="text" placeholder="输入姓名：张三" />
        </p>
        <p>年龄<input id="age" type="text" placeholder="输入年龄：21" /></p>
        <p>
          性别
          <select id="gender">
            <option value="" disabled selected>----性别----</option>
            <option value="男">男</option>
            <option value="女">女</option>
            <option value="你猜">你猜</option>
          </select>
        </p>

        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table"></table>
    </div>

    <script>
      var tableHead = document.createElement("thead");
      tableHead.innerHTML =
        "<tr><td>学号</td><td>姓名</td><td>年龄</td><td>性别</td><td>操作</td></tr>";
      table.appendChild(tableHead); //构建表头

      var addBtn = document.getElementById("addBtn");
      var sortBtn = document.getElementById("sortBtn");

      //构建表格
      addBtn.onclick = function () {
        //添加操作 必须写学号&姓名才能添加
        var stuId = parseInt(document.getElementById("stuid").value);
        var name = document.getElementById("username").value;
        var stuAge = document.getElementById("age").value;
        var sex = document.getElementById("gender").value;
        if (name != "" && stuId != NaN) {
          console.log([stuId, name, stuAge, sex]);
          var trEle = document.createElement("tr");
          trEle.style.background = "white";
          trEle.innerHTML = `<td class="stuId">${stuId}</td><td>${name}</td><td>${stuAge}</td><td>${sex}</td><td><button class="btn">删除</button></td>`;
          table.appendChild(trEle);
        }

        //删除操作
        var btns = document.querySelectorAll(".btn");
        Array.from(btns).forEach(function (item, i) {
          item.onclick = function () {
            item.parentNode.parentNode.remove();
          };
        });
        //   隔行变色;
        var btns = document.querySelectorAll(".btn");
        Array.from(btns).forEach(function (item, i) {
          if (i % 2 != 0) {
            item.parentNode.parentNode.style.background = "white";
          }
        });

        //排序
        sortBtn.onclick = function () {
          var stuIdNodes = document.querySelectorAll("stuId");
          var stuIds = [];
          Array.from(stuIdNodes).forEach(function (item, i) {
            console.log(parseInt(stuIdNodes[i].value));
            stuIds[i] = parseInt(stuIdNodes[i].value);
          });
          console.log(stuIds);
        };
      };
    </script>
  </body>
</html>
